<template>
    <div>
        <div class="flex top">
            <div>产品详情</div>
            <button @click.prevent="onsure">确定</button>
        </div>
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px" class="forms">
                <el-form-item label="产品信息" />
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="商品编码" prop="code">
                    <el-input v-model="form.code" />
                </el-form-item>
                <el-form-item label="内部编码">
                    <el-input v-model="form.skuId" />
                </el-form-item>
                <el-form-item label="商家编码" prop="iId">
                    <el-input v-model="form.iId" />
                </el-form-item>
                <el-form-item label="产品型号" prop="model">
                    <el-input v-model="form.model" />
                </el-form-item>
                <el-form-item label="产品等级">
                    <el-select v-model="form.level" placeholder="请选择产品等级" style="width: 100%;" clearable>
                        <el-option
                            v-for="(item,index) in dict.t_jst_goods_level"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商">
                    <el-select v-model="form.supplierName" placeholder="请选择供应商" style="width: 100%;" clearable>
                      <el-option
                        v-for="(item,index) in dict.t_jst_supplier"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%;" clearable>
                        <el-option
                            v-for="(item,index) in dict.t_jst_goods_type"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="尺码">
                    <el-select v-model="form.size" placeholder="请选择尺码" style="width: 100%;" clearable>
                        <el-option
                            v-for="(item,index) in dict.t_jst_goods_size"
                            :key="index"
                            :label="item.label"
                            :value="item.label"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="颜色规格">
                    <el-input v-model="form.color"></el-input>
                </el-form-item>
                <el-form-item label="拍照样品">
                    <el-input v-model="form.photoSample" />
                </el-form-item>
                <el-form-item label="首批大货">
                    <el-input v-model="form.firstBulk" />
                </el-form-item>
                <el-form-item label="内长">
                    <el-input v-model="form.length" />
                </el-form-item>
                <el-form-item label="材质">
                    <el-input v-model="form.material" />
                </el-form-item>
                <el-form-item label="拍照突出点">
                    <el-input v-model="form.photoHighlight" />
                </el-form-item>
                <el-form-item label="成本1">
                    <el-input-number v-model="form.costPrice1" style="width: 100%;"></el-input-number>
                </el-form-item>
                <el-form-item label="成本2">
                    <el-input-number v-model="form.costPrice2" style="width: 100%;"></el-input-number>
                </el-form-item>
                <el-form-item label="成本3">
                    <el-input-number v-model="form.costPrice3" style="width: 100%;"></el-input-number>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" />
                </el-form-item>
                <el-form-item label="照片">
                    <el-upload ref="pictureUpload" class="upimg"
                        :action="upload.url" :headers="headers"
                        list-type="picture-card"
                        :on-success="handleSuccess">
                        <i class="el-icon-plus"></i>

                        </el-upload>

                </el-form-item>
                <div class="imgs flex" v-for="(item,i) in imageList" :key="i">
                            <el-image :src="item" alt="" />
                            <div class="mask">
                                <i class="el-icon-zoom-in" @click="handlePictureCardPreview(i)"></i>
                                <i class="el-icon-delete" @click="handleRemove(i)"></i>
                            </div>
                        </div>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="imageUrl" alt="">
                </el-dialog>
            </el-form>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getToken} from '@/utils/auth'
export default {
    dicts:['t_jst_goods_type','t_jst_goods_level','t_jst_goods_size','t_jst_supplier'],
    props:{
        form:{
            default(){
                return {imageUrl:[]}
            },
            type:Object
        },
    },
    data() {
        return {
            headers: {
                Authorization: getToken()
            },
            dialogVisible: false,
            disabled: false,
            imageUrl:'',
            rules:{
              name: [{required: true, message: '商品名称不能为空', trigger: 'blur'}],
              code: [{required: true, message: '商品编码不能为空', trigger: 'blur'}],
              iId: [{required: true, message: '商家编码不能为空', trigger: 'blur'}],
              model: [{required: true, message: '产品型号不能为空', trigger: 'blur'}]
            },
            imageList:[],
            upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传的地址
        url: '',
        // 上传的文件列表
        fileList: [],

        imgList:[]
      },
        }
    },
    watch:{
        'form.imageUrl'(n){
          this.imageList = JSON.parse(this.form.imageUrl)
        }
    },
    created(){
        this.upload.url = window.location.href.split('/').slice(0,3).join('/')+'/api/common/uploadImageToFixedSize'

    },
    computed: {
    ...mapGetters([
      'uploadApi'
    ])
  },
    methods: {
        getInfo(e){
            this.form.supplierName=e.name
        },
      handlePictureCardPreview(i) {
        this.imageUrl = this.list[i];
        this.dialogVisible = true;
      },
      handleRemove(i) {
          this.imageList.splice(i, 1)
        // let uploadFiles = this.$refs.pictureUpload.uploadFiles
        // for (var i = 0; i < uploadFiles.length; i++) {
        //   if (uploadFiles[i]['url'] == file) {
        //     uploadFiles.splice(i, 1)
        //   }
        // }
      },
      handleSuccess(res){
        if(res.status===200){
            this.$message.success(res.msg)
                if (!this.imageList) {
                    this.imageList=[]
                    this.imageList.push(res.data.path)
                }else{
                    this.imageList.push(res.data.path)
                }

        }else{
            this.$message.error(res.msg)
            let i=this.$refs.pictureUpload.uploadFiles.length-1
            this.$refs.pictureUpload.uploadFiles.splice(i, 1)
        }
      },
      onsure(){
        this.$refs['form'].validate(valid => {
            if (!valid) {
                if (!this.form.code) {
                    this.$message.error("商品编码不能为空")
                }
                if (!this.form.name) {
                    this.$message.error("商品名称不能为空")
                }
            }else{
              this.form.imageUrl=JSON.stringify(this.imageList)
            this.$emit('onsure',this.form)
            }
        })
      },
      getsize(val){
        console.log(val,'hhhhhhhhhhh');
      }
    },
}
</script>

<style lang="scss" scoped>
    .top{
        justify-content: center;
        align-items: center;
        margin: 10px 0;
        button{
            border: 1px solid #ebeef5;
            padding: 5px 10px;
            height: 25px;
            width: 60px;
            margin-left: 14px;
            border-radius: 4px;
            background-color: white;
        }
    }
    .forms{
        padding: 10px 20px;
    }
    .mask{
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: space-evenly;
        font-size: 20px;
        }
    .imgs{
        position: relative;
        margin: 5px;
        display: inline-block;
        width: 30%;
        &:hover .mask{
            opacity: 1;
        }
    }
    .upimg{
        ::v-deep .el-upload-list{
            display: none;
    }
    }

</style>
